<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" >
        <script src="../js/jquery.min.js" ></script>
        <title>lx6</title>
        <style>
            body{
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                 }
            .tbl{
                    flex-flow: center;
                    margin-bottom: 50px;
                 }
            span{
                    border: solid 3px;
                    margin-left: 5px;
                 }
            .tb2{
                    display:block;
                    width: 750px;
                    height: 750px;
                 }
            .tb2 div{
                        text-align: center;
                            float:left;
                            width: 350px;
                            height: 350px;
                            border-radius: 22px;
                            border: solid 2px;
                     }
            .tb2 img{
                        width: 100px;
                        height: 100px;
                     }
            .lianxi{
                       text-align: center;
                    }         
            .call{
                    margin: 30px auto 20px auto;
                    display: flex;
                    flex-flow: column;
                 }
            .call input[type="text"]{
                                        width: 300px;
                                        border:solid 2px;
                                        border-radius: 22px;
                                        text-align: center;
                                        outline: none;
                                        margin: 10px auto;
                                    }
            input[type="button"]{
                                    border: solid 2px;
                                    border-radius: 22px;
                                    cursor: pointer;
                                 }
            input[type="button"]:focus{
                                            background-color:#000000;
                                            color:aliceblue;
                                            width: 100px;
                                            transition: 0.5s
                                       }
            .title1{margin: 50px auto 50px auto;}
            .title1{margin: 50px auto 50px auto;}
            .title2{margin: 40px auto 50px auto;}
            .text1{
                        width:400px;height: 200px;
                        border: solid 2px;
                        border-radius: 12px;
                        outline:none;
                    }
            .nav{text-align: center;
                 width: 100%;}
            ul {
                    list-style-type: none;
                    margin-left:40%;
                    margin-right:39.6%;
                    padding: 0;
                    overflow: hidden;
                    background-color:papayawhip;
                }
            li {
                    float: left;
                    margin: 0px auto;
                }
            li a {
                    float: left;
                    display: block;
                    color: #000000;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                  }
            li a:hover {
                            background-color:#000000;
                            color:aliceblue;
                        }
        </style>
    </head>
    <body>
        <div class="nav">
            <div class="title">我的响应式网站</div>
            <ul>
                <li><a href="#tbl" >九九乘法表</a></li>
                <li><a href="#tb2" >物理学家简介</a></li>
                <li><a href="#call" >联系我</a></li>
            </ul>
        </div>
        <h2 class="title1">九九乘法表</h2>
        <div class="tbl" id="tbl">
            <script>
                $(document).ready(function(){
                    for(var i=1;i<=9;i++){
                        for(var j=1;j<=i;j++){
                        var table1=document.getElementById("tbl");
                        var newp=document.createElement("span");
                        let result=i*j;
                        table1.appendChild(newp);
                        newp.innerHTML=i+"*"+j+"="+result+" ";
                        }
                        var newp2=document.createElement("p");
                        table1.appendChild(newp2);
                    }
                }
            );
            </script>   
        </div>
        <div>
            <input id="btn1" type="button" value="transform" >
            <input id="btn2" type="button" value="recover" >
        </div>
        <script>
            $("#btn1").click(function(){
                $("body").css("text-align","center");
            });
            $("#btn2").click(function(){
                $("body").css("text-align","none");
            });
        </script>
        <h2 class="title2">物理学家简介</h2>
        <div class="tb2" id="tb2">
            <div>
                <p>ads</p>
                <img src="../images/ads.jpg" >
                <p>托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项，被传媒授予“门洛帕克的奇才”称号!</p>
            </div>
            <div>
                <p>lbnc</p>
                <img src="../images/lbnc.jpg" >
                <p>戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。他本人是一名律师，经常往返于各大城镇，他许多的公式都是在颠簸的马车上完成的，他也自称具有男爵的贵族身份。</p>
            </div>
            <div>
                <p>newton</p>
                <img src="../images/newton.PNG" >
                <p>艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。</p>
            </div>
            <div>
                <p>tsl</p>
                <img src="../images/tsl.jpg" >
                <p>尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。</p>
            </div>
        </div>
        <h2>联系我们</h2>
        <dt class="lianxi">联系方式</dt>
        <dd>地址：河南省信阳时浉河区南湖路237号</dd>
        <dd>邮编：454000</dd>
        <dd>网址：http://www.xynu.edu.cn/</dd>
        <dd>电话：12345678910</dd>
        <form class="call" id="call" action="" method="GET">
            <input type="text" id="text2" placeholder="电子邮箱" >
            <input type="text" id="text3" placeholder="手机号" >
            <textarea class="text1" placeholder="请填写信息"></textarea>
        </form>
        <input id="btnn" type="button" value="提交">
        <script>
            $("#btnn").click(function(){
                var text1=document.getElementById("text2").value;
                var text2=document.getElementById("text3").value;
                alert("提交成功\n"+"电子邮箱: "+text1+"\n"+"手机号: "+text2);
            });
        </script>
    </body>
</html>